<template>
  <!-- 实名认证组件的结构 -->
  <el-card>
    <!-- 卡片的头部 -->
    <template #header>
      <div class="card-header">
        <h1>实名认证</h1>
      </div>
    </template>
    <!-- 实名认证结构的提示部分 -->
    <div class="tip">
      <p>
        <el-icon>
          <InfoFilled />
        </el-icon>完成实名认证后才能添加就诊人，正常进行挂号，为了不影响后续步骤，建议提前完成实名认证。
      </p>
    </div>
    <!-- 卡片身体的底部：认证成功的机构、认证未成功的结构 -->
    <el-descriptions
      v-if="userInfo.authStatus==3"
      size="small"
      class="margin-top"
      :column="1"
      border
    >
      <el-descriptions-item label-align="center" width="20px">
        <template #label>
          <div class="cell-item">用户姓名</div>
        </template>
        {{userInfo.name}}
      </el-descriptions-item>
      <el-descriptions-item label-align="center" width="20px">
        <template #label>
          <div class="cell-item">证件类型</div>
        </template>
        {{userInfo.certificatesType=='10'?'身份证':'户口本'}}
      </el-descriptions-item>
      <el-descriptions-item label-align="center" width="20px">
        <template #label>
          <div class="cell-item">证件号码</div>
        </template>
        {{userInfo.certificatesNo}}
      </el-descriptions-item>
    </el-descriptions>
    <!-- 用户未验证的结构 -->
    <el-form
      ref="form"
      :model="params"
      :rules="rules"
      v-else
      style="width:60%;margin:30px auto;"
      label-width="80"
    >
      <el-form-item label="用户姓名" prop="name">
        <el-input placeholder="请输入用户姓名" v-model="params.name" />
      </el-form-item>
      <el-form-item label="证件类型" prop="certificatesType">
        <el-select placeholder="请选择证件类型" v-model="params.certificatesType">
          <el-option
            v-for="(item,index) in arrType"
            :key="index"
            :label="item?.name"
            :value="item?.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="证件号码" prop="certificatesNo">
        <el-input placeholder="请输入证件号码" v-model="params.certificatesNo" />
      </el-form-item>
      <el-form-item label="上传证件" prop="certificatesUrl">
        <el-upload
          list-type="picture-card"
          :limit="1"
          :on-exceed="exceedhandler"
          action="/api/oss/file/fileUpload?fileHost=userAuah"
          :on-success="successhandler"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          ref="upload"
        >
          <img style="width:100%;" src="@/assets/images/auth_example.png" />
        </el-upload>
        <el-dialog v-model="dialogVisible">
          <img
            w-full
            style="width:100%;height:100%;"
            :src="params.certificatesUrl"
            v-if="params.certificatesUrl"
            alt="Preview Image"
          />
        </el-dialog>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="default" @click="submit">提交</el-button>
        <el-button type="primary" size="default" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script lang="ts" setup>
// @ts-ignore
import { onMounted,ref,reactive } from "vue";
// @ts-ignore
import { InfoFilled, Plus } from "@element-plus/icons-vue";
import { ElMessage } from 'element-plus'
// @ts-ignore
import {reqUserInfo,reqCertationType,reqUserCertation} from "@/api/user"
// @ts-ignore
import type {UserInfoResponseData,CertationArr,CertationTypeResponseData,UserParams} from "@/api/user/type"

// 存储用户信息
let userInfo:any=ref({})
let arrType=ref<CertationArr>([])
// 收集表单认证的数据
let params=reactive({
  certificatesNo: "",
  certificatesType: "",
  certificatesUrl: "",
  name: ""
})
// 控制对话框的显示与隐藏
let dialogVisible=ref<boolean>(false)
let upload=ref()
let form = ref()
// 获取用户信息方法
const getUserInfo=async()=>{
  let result:UserInfoResponseData=await reqUserInfo()
  if(result.code==200){
    userInfo.value=result.data
  }
}
// 获取证件类型的数据
const getType=async()=>{
  let result:CertationTypeResponseData=await reqCertationType();
  if(result.code==200){
    arrType.value=result.data
  }
}
onMounted(()=>{
  // 获取用户信息的方法
  getUserInfo()
  // 获取证件类型的接口
  getType()
})
// 超出上传图片数量提示
const exceedhandler=()=>{
  ElMessage({
    message: '只允许上传一张图片！',
    type: 'error',
  })
}
// 图片上传成功的钩子
const successhandler=(response: any)=>{
  // 收集上传成功的图片地址
  params.certificatesUrl=response.data
  form.value.clearValidate()
}
// 预览图片
const handlePictureCardPreview=() => {
  dialogVisible.value = true
}
// 删除上传图片的钩子
const handleRemove=()=>{
  params.certificatesUrl=''
}
// 提交
const submit=async()=>{
  // 进行全部的表单校验
  await form.value.validate('validatorUrl')
  try{
    await reqUserCertation(params)
    ElMessage({
    message: '认证成功',
    type: 'success',
  })
  getUserInfo();
  }catch(error){
    ElMessage({
    message: '认证失败',
    type: 'error',
  })
  }
}
// 重置
const reset=()=>{
 Object.assign(params,{
  certificatesNo: "",
    certificatesType: "",
    certificatesUrl: "",
    name: ""
 })
// 清除文件上传的列表
upload.value.clearFiles()
}
// 表单校验规则对象
const validatorName= (rule: any, value: any, callback: any) => {
  const reg=/^[\u00B7\u3007\u3400-\u4DBF\u4E00-\u9FFF\uE000-\uF8FF\uD840-\uD8C0\uDC00-\uDFFF\uF900-\uFAFF]+$/
  if (reg.test(value)) {
    callback()
  } else {
    callback(new Error('请输入正确的中国人姓名'))
  }
}
const validatorType=(rule:any,value:any,callback:any)=>{
  if(value=='10'||value=='20'){
    callback()
  }else{
    callback(new Error('请选择证件的类型'))
  }
}
const validatorNo=(rule:any,value:any,callback:any)=>{
 let sfz=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
 let hhb= /\d{9}/
 if(sfz.test(value)||hhb.test(value)){
    callback()
  }else{
    callback(new Error('请输入正确的身份证或户口本号码'))
  }
}
// 证件照图片的地址
const validatorUrl=(rule:any,value:any,callback:any)=>{
  if(value.length){
    callback()
  }else{
    callback(new Error('请上传证件照'))
  }
}
const rules = reactive({
  name: [
    { required: true,validator:validatorName, trigger: 'blur' },
  ],
  certificatesType:[
    {required:true,validator:validatorType}
  ],
  certificatesNo:[
    {required:true,validator:validatorNo}
  ],
  certificatesUrl:[
    {required:true,validator:validatorUrl}
  ]
})
</script>

<style lang="scss" scoped>
.tip {
  color: #7f7f7f;
  font-size: 14px;
  p {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .el-icon {
    margin-right: 5px;
  }
}
.el-descriptions {
  margin-top: 30px;
}
</style>
